<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      style="display:flex;margin:30px"
      label-width="100px"
      label-position="top"
      class="demo-dynamic"
    >
      <el-form-item v-for="(item,index) in picturesData" :key="index" :label="item.label">
        <imgUpLoad :value="item.url" :srcDateImg="item.type" @input="imgModel"/>
      </el-form-item>
      <!-- flex中space-around最后一行问题 -->
      <el-form-item
        style="width:148px"
        v-show="picturesData.length % 4 != 0"
        v-for="(item1,index1) in 4 - picturesData.length % 4"
        :key="index1 + '.'"
      ></el-form-item>
    </el-form>
    <div style="margin:60px">
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </div>
</template>

<script>
import imgUpLoad from "./img.vue";
import { sysAjax } from "Ajax";
export default {
  components: {
    imgUpLoad
  },
  props: ['visible' , 'picturesData', 'code'],
  // {
    
  //   // visible: {
  //   //   type: Boolean,
  //   //   default: false
  //   // },
  //   // picturesData: {
  //   //   type: Object,
  //   //   default: function() {
  //   //     return {};
  //   //   }
  //   // }
  // },
  data() {
    return {
      form: {
        zpl: "",
        idCard: "",
      },
      imgDate: '',
      imagesData: [],

    };
  },
  mounted() {
    this.imagesData = this.picturesData;
  },
  methods: {
    imgModel(val) {
      for (let i in this.imagesData) {
        if (this.imagesData[i].type === val.type) {
          this.imagesData[i].url = val.url;
        }
      }
    },
    close() {
      this.$emit("update:visible", false);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let obj = {code: this.code}
          for (let i in this.imagesData) {
            obj[this.imagesData[i].type] = this.imagesData[i].url
          }
          sysAjax.updateMerchantManageLicenceInfo(obj).then(res=>{
            this.msgSuccess('修改成功')
            this.close()
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  // watch: {
  //   picturesData: {
  //     immediate: true,
  //     handler: function(value) {
  //       this.imagesData = [
  //         {
  //           label: "营业执照",
  //           url: value.businessLicenseImg,
  //           type: 'businessLicenseImg'
  //         },
  //         {
  //           label: "法人身份证正面",
  //           url: value.legalPersonCardFirstImg,
  //           type: 'legalPersonCardFirstImg'
  //         },
  //         {
  //           label: "法人身份证反面",
  //           url: value.legalPersonCardSecondImg,
  //           type: 'legalPersonCardSecondImg'
  //         },
  //         {
  //           label: "银行卡正面",
  //           url: value.bankCardFirstImg,
  //           type: 'bankCardFirstImg'
  //         },
  //         {
  //           label: "银行卡反面",
  //           url: value.bankCardSecondImg,
  //           type: 'bankCardSecondImg'
  //         },
  //         {
  //           label: "商户门头照片",
  //           url: value.merchantPhotoImg,
  //           type: 'merchantPhotoImg'
  //         },
  //         {
  //           label: "内部前台照片",
  //           url: value.storeReception,
  //           type: 'storeReception'
  //         },
  //         {
  //           label: "店内环境照片",
  //           url: value.storeEnvironment,
  //           type: 'storeEnvironment'
  //         },
  //         {
  //           label: "补充材料照片",
  //           url: value.supplementaryAgreement,
  //           type: 'supplementaryAgreement'
  //         },
  //         {
  //           label: "开户许可证照片或对公账户信息",
  //           url: value.accountPermit,
  //           type: 'accountPermit'
  //         },
  //         {
  //           label: "结算人身份证正面",
  //           url: value.settlementPersonCardFirstImg,
  //           type: 'settlementPersonCardFirstImg'
  //         },
  //         {
  //           label: "结算人身份证反面",
  //           url: value.settlementPersonCardSecondImg,
  //           type: 'settlementPersonCardSecondImg'
  //         },
  //       ];
  //     }
  //   }
  // }
};
</script>

<style scoped>
.demo-dynamic {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.el-form-item {
  margin-left: 20px;
}
</style>
